<template>
  <view class="add_edit">
    <z-nav-bar id="nav" bgColor="#ffffff" title="添加/编辑信息"></z-nav-bar>
    <public-loading></public-loading>
    <view class="staff-edit-pot" >
      <uni-forms ref="formRef" :rules="rules" :modelValue="formData">
        <view class="form-item">
          <view class="label">姓名</view>
          <view class="cell">
            <uni-forms-item required name="name">
              <uni-easyinput
                v-model="formData.name" :placeholder="rules['name'].rules[0].errorMessage"
                :placeholderStyle="placeHolder.styles" :input-border="false" trim :clearable="false"
              />
            </uni-forms-item>
          </view>
        </view>
        <view class="form-item">
          <view class="label">电话</view>
          <view class="cell">
            <uni-forms-item required name="phone">
              <uni-easyinput
                type="number" :maxlength="11"
                v-model="formData.phone" :placeholder="rules['phone'].rules[0].errorMessage"
                style="color: black;"
                :placeholderStyle="placeHolder.styles" :input-border="false" trim :clearable="false"
              />
            </uni-forms-item>
          </view>
        </view>
        <view class="form-item"  @click="handleShow">
          <view class="label">性别</view>
          <view class="cell">
            <uni-forms-item required name="phone"   >
              <uni-easyinput

                type="number"
                :disabled="true"
                v-model="formData.gender" :placeholder="rules['phone'].rules[0].errorMessage"
                :placeholderStyle="placeHolder.styles" :input-border="false" trim :clearable="false"
              />
            </uni-forms-item>
          </view>
        </view>
        <view class="form-item">
          <view class="label">授权额度</view>
          <view class="cell">
            <uni-forms-item required name="authAmount">
              <uni-easyinput
                 type="number"
                v-model="formData.authAmount" :placeholder="rules['authAmount'].rules[0].errorMessage"
                :placeholderStyle="placeHolder.styles" :input-border="false" trim :clearable="false"
              />
            </uni-forms-item>
          </view>
        </view>
      </uni-forms>
    </view>
    <view class="bottom-btn-box">
      <main-button :color="'#fff'" :margin="'24rpx 0 0'" @click="submit">保存</main-button>
    </view>
    <up-picker @close="cancel" :closeOnClickOverlay="true" @cancel="cancel" @confirm="confirm" :show="show" :columns="columns"></up-picker>
  </view>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { CustomPlaceHoder, delay } from '@/utils/common'
import { validatePhoneNumber } from '@/utils/validate'
import {relationAddUser} from '@/api/pagesMy/user'
import {systemRelation} from '../../api/pagesMy/user'
const placeHolder = new CustomPlaceHoder({ textAlign: 'right' })
const id= ref('')
const groupCardNo = ref('')
const groupManId = ref('')
const columns= ref([
  [  { text: '男', value: 1 },
  { text: '女', value: 2 },]
])
const show = ref(false)
const formData = reactive({
  name: '',
  phone: '',
  authAmount:'',
  gender: "男", // 默认性别为1
})
const formRef = ref()
const rules = ref({
  name: {rules: [{ required: true, errorMessage: '请输入姓名' }]},
  gender: {rules: [{ required: true, errorMessage: '请选择性别' }]},
  phone: {
    rules: [
      { required: true, errorMessage: '请输入手机号码' },
      { validateFunction: validatePhoneNumber }
    ]
  },
  authAmount: {rules: [{ required: true, errorMessage: '请输入授权额度' }]},
})
const submit = async () => {
  if (formRef.value) {
    const result = await formRef.value.validate().catch(() => false)
    if(result) {
      let gender = formData.gender === '男' ? 1 : 2
      if( !groupManId.value){
        relationAddUser({...formData,gender,groupCardNo:groupCardNo.value}).then(res=>{
          uni.showToast({ title: '保存成功', icon: 'none' })
          Object.keys(formData).forEach(key=>{
            formData[key] = ''
          })
          uni.$emit('refreshGroupCard')
          setTimeout(()=>{
            uni.navigateBack({
              delta: 1
            })
          },1500)
        })
      }else {
        systemRelation({
          ...formData,
          gender,
          id:groupManId.value
        }).then(res=>{
          uni.showToast({ title: '修改成功', icon: 'none' })
          Object.keys(formData).forEach(key=>{
            formData[key] = ''
          })
          setTimeout(()=>{
            uni.navigateBack({
              delta: 1
            })
          },1500)
          uni.$emit('refreshGroupCard')
        })
      }

    }
  }
}
function cancel() {
  show.value = false
}
function confirm(value) {
  formData.gender = value.value[0].text
  show.value = false
}
function handleShow() {
  show.value = true
}
onLoad((options)=>{
  id.value = options.id
  groupCardNo.value = options.groupCardNo
  if(options.groupManId){
    groupManId.value = options.groupManId
  }
  if(options.type){
    let userInfo = JSON.parse(options.userInfo)
    formData.name =userInfo.name
    formData.authAmount = userInfo.authAmount
    formData.phone = userInfo.phone
     formData.gender =userInfo.gender==1? "男" : "女"
  }
})
</script>

<style lang="scss" scoped>
.add_edit{
  width: 100%;
  min-height: 100vh;
  background-color: #fff;
}
.staff-edit-pot{
  padding: 0 32rpx;
  .edit-item{
    padding: 32rpx 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 32rpx;
    color: #222;
    border-bottom: 1rpx solid rgba(229, 229, 229, 0.6);
    .left{
      font-weight: bold;
    }
    .right{
      text-align: right;
    }
  }
}
.form-item {
  height: 109rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1rpx solid #E5E5E5;
  font-size: 32rpx;
  color: #222;
  .uni-forms-item__error {
    top: calc(100% + 8rpx);
    left: unset;
    right: 0;
  }
  .uni-easyinput__content.is-disabled {
    background-color: unset !important;
    color: unset !important;
  }
}
</style>
